<template>
  <div class="allOrderContainer">
    <!-- 订单操作 -->
    <div class="actions">
      <div class="left">
        <el-button
          v-permission="'dataView_module_branch_relation_create'"
          style="margin: 0px 0px 10px 0px"
          data-tracker="P39-1"
          type="primary"
          plain
          size="mini"
          @click="addModleListFn"
          ><i class="el-icon-plus"></i> 新增模块组织关系</el-button
        >
      </div>
    </div>
    <div>
      <el-table
        :max-height="maxheight"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'branch_info' }"
      >
        <el-table-column prop="module_name" label="模块名称"> </el-table-column>
        <el-table-column prop="branch_name" label="组织名称"> </el-table-column>
        <el-table-column prop="admin_info" label="用户名称">
          <template slot-scope="scope">
            <i
              style="margin-left: 8px"
              v-for="(item, index) in scope.row.admin_info"
              :key="index + 36"
              >{{ item.username }}</i
            >
          </template>
        </el-table-column>
        <el-table-column prop="pop" label="操作" width="260">
          <template
            slot-scope="scope"
            v-if="scope.row.module_id && scope.row.branch_id"
          >
            <el-button
              data-tracker="P39-2"
              v-permission="'dataView_module_branch_relation_update'"
              type="text"
              size="mini"
              @click="editorFn(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="AddAuthorizationFn(scope.row)"
              data-tracker="P39-3"
              v-permission="'dataView_permission_authorization'"
              >分配视野权限</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="CancleAuthorizationFn(scope.row)"
              data-tracker="P39-4"
              v-permission="'dataView_permission_cancle_authorization'"
              >取消视野权限</el-button
            >
            <el-button
              data-tracker="P39-5"
              size="mini"
              type="text"
              @click="deleteFn(scope.row)"
              v-permission="'dataView_module_branch_relation_delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      ref="perForm"
      title="添加组织模块关系"
      :close-on-click-modal="false"
      :visible="showOrgDialog"
      @close="handleCloseDialog"
      width="35%"
    >
      <el-form
        :model="ruleform"
        :rules="rules"
        ref="ruleform"
        label-width="120px"
      >
        <el-form-item label="模块名称" prop="modlename">
          <el-select v-model="ruleform.modlename">
            <el-option
              v-for="item in ModuleListData"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织名称" prop="branchname">
          <el-cascader
            v-model="ruleform.branchname"
            :options="organizationData"
            :props="defaultProps"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button data-tracker="P39-7" @click="showOrgDialog = false"
            >取消</el-button
          >
          <el-button data-tracker="P39-6" type="primary" @click="handleClickOk"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      ref="perForm"
      title="编辑组织模块关系"
      :close-on-click-modal="false"
      :visible="showOrgDialogEdit"
      @close="handleCloseDialogEdit"
      width="35%"
    >
      <el-form
        :model="ruleformEdtit"
        :rules="rulesEdtit"
        ref="ruleformEdtit"
        label-width="120px"
      >
        <el-form-item label="模块名称" prop="modlename">
          <el-select v-model="ruleformEdtit.modlename">
            <el-option
              v-for="item in ModuleListData"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织名称" prop="branchname">
          <el-cascader
            v-model="ruleformEdtit.branchname"
            :options="organizationData"
            :props="defaultPropsEdit"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button data-tracker="P39-9" @click="showOrgDialogEdit = false"
            >取消</el-button
          >
          <el-button
            data-tracker="P39-8"
            type="primary"
            @click="handleClickEditOk"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      ref="perForm"
      title="权限分配"
      :close-on-click-modal="false"
      :visible="showOrgDialogroles"
      @close="handleCloseDialogROL"
      width="35%"
    >
      <el-form
        :model="ruleformroles"
        :rules="rulesroles"
        ref="ruleformroles"
        label-width="120px"
      >
        <el-form-item label="组织名称" prop="branchname">
          <el-cascader
            v-model="ruleformroles.branchname"
            :options="organizationData"
            :props="defaultProps"
            clearable
            @change="branchnameClickFn"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="员工" prop="staff">
          <el-select
            v-model="ruleformroles.staff"
            filterable
            multiple
            placeholder="支持姓名搜索"
          >
            <el-option
              v-for="item in staffData"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            >
              {{ item.nickname + "(" + item.mobile + ")" }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button data-tracker="P39-11" @click="showOrgDialogroles = false"
            >取消</el-button
          >
          <el-button
            data-tracker="P39-10"
            type="primary"
            @click="handleClickOkROL"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      ref="perForm"
      title="取消权限分配"
      :close-on-click-modal="false"
      :visible="showOrgDialogCloseroles"
      @close="handleCloseDialogCloseROL"
      width="35%"
    >
      <el-form
        :model="ruleformCloseroles"
        :rules="rulesCloseroles"
        ref="ruleformCloseroles"
        label-width="120px"
      >
        <el-form-item label="组织名称" prop="branchname">
          <el-cascader
            v-model="ruleformCloseroles.branchname"
            :options="organizationData"
            :props="defaultProps"
            clearable
            @change="branchnameClickFn"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="员工" prop="staff">
          <el-select
            v-model="ruleformCloseroles.staff"
            multiple
            @change="staffChangeFn"
          >
            <el-option
              v-for="item in staffData"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            data-tracker="P39-13"
            @click="showOrgDialogCloseroles = false"
            >取消</el-button
          >
          <el-button
            data-tracker="P39-12"
            type="primary"
            @click="handleClickOkCloseROL"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  ModulebranchrelationList,
  ModuleList,
  ModulebranchrelationCreate,
  ModulebranchrelationDelete,
  PermissionAuthorization,
  PermissionCancleAuthorization,
  PermissionCancleUpdate,
  AdminBox,
} from "@/api/Dataview";
import { organizationBox } from "@/api/organization";
import { getParentIds } from "@/utils/mUtils";

export default {
  name: "Dataview",
  data() {
    return {
      maxheight: "auto",
      showOrgDialog: false,
      showOrgDialogEdit: false,
      showOrgDialogroles: false,
      showOrgDialogCloseroles: false,
      tableData: [],
      organizationData: [],
      ModuleListData: [],
      ruleform: {
        modlename: "",
        branchname: "",
      },
      rules: {},
      ruleformEdtit: {
        modlename: "",
        branchname: "",
      },
      rulesEdtit: {},
      ruleformroles: {
        branchname: "",
        staff: "",
      },
      rulesroles: {},
      ruleformCloseroles: {
        branchname: "",
        staff: "",
      },
      rulesCloseroles: {},
      defaultProps: {
        children: "next_level_data",
        label: "branch_name",
        value: "id",
        checkStrictly: true,
      },
      defaultPropsEdit: {
        children: "next_level_data",
        label: "branch_name",
        value: "id",
        checkStrictly: true,
      },
      staffData: [],
      adminId: [],
      newArr: [],
      moduleid: "",
      moduleIdData: "",
    };
  },
  mounted() {
    this.ModulebranchrelationListFn();
    this.ModuleListFn();
    this.organizationBoxFn();
    this.branchnameClickFn();
  },
  methods: {
    branchnameClickFn() {
      const data = {};
      AdminBox(data).then((res) => {
        if (res.code === 10000) {
          this.staffData = res.data;
        }
      });
    },
    organizationBoxFn() {
      const data = {};
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.organizationData = res.data;
        }
      });
    },
    ModuleListFn() {
      const data = {};
      ModuleList(data).then((res) => {
        if (res.code === 10000) {
          this.ModuleListData = res.data;
        }
      });
    },
    addModleListFn() {
      this.showOrgDialog = true;
    },
    handleCloseDialog() {
      this.showOrgDialog = false;
    },
    //创建
    handleClickOk() {
      const data = {
        module_id: this.ruleform.modlename,
        branch_ids: this.ruleform.branchname,
      };
      ModulebranchrelationCreate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "创建模块组织关系成功",
            type: "success",
          });
          this.showOrgDialog = false;
          this.ModulebranchrelationListFn();
        }
      });
    },
    //编辑
    editorFn(res) {
      const branch_id = Number(res.branch_id.split("_")[1]);
      const idArr = getParentIds(branch_id, this.organizationData).concat(
        branch_id
      );
      this.ruleformEdtit.old_branch_ids = idArr;
      this.ruleformEdtit.old_module_id = Number(res.module_id.split("_")[1]);
      this.ruleformEdtit.branchname = idArr;
      this.ruleformEdtit.modlename = Number(res.module_id.split("_")[1]);
      // console.log(res, this.ruleformEdtit);
      this.showOrgDialogEdit = true;
    },
    handleCloseDialogEdit() {
      this.showOrgDialogEdit = false;
    },
    //编辑确定
    handleClickEditOk() {
      const data = {
        module_id: this.ruleformEdtit.modlename,
        branch_ids: this.ruleformEdtit.branchname,
        old_branch_ids: this.ruleformEdtit.old_branch_ids,
        old_module_id: this.ruleformEdtit.old_module_id,
      };
      PermissionCancleUpdate(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "修改模块组织关系成功",
            type: "success",
          });
          this.showOrgDialogEdit = false;
          this.ModulebranchrelationListFn();
        }
      });
    },

    //添加权限
    AddAuthorizationFn(val) {
      this.showOrgDialogroles = true;
      this.ruleformroles.branchname = val.branch_id
        ? Number(val.branch_id.split("_")[1])
        : "";
      this.moduleIdData = val.module_id;
    },
    handleCloseDialogROL() {
      this.showOrgDialogroles = false;
    },
    // 保存权限
    handleClickOkROL() {
      const data = {
        admin_ids: this.ruleformroles.staff,
        branch_id: Number(this.ruleformroles.branchname),
        module_id: Number(this.moduleIdData.split("_")[1]),
      };
      PermissionAuthorization(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "模块关系分配权限成功",
            type: "success",
          });
          this.showOrgDialogroles = false;
          this.ModulebranchrelationListFn();
        }
      });
    },
    //取消权限分配
    CancleAuthorizationFn(val) {
      this.showOrgDialogCloseroles = true;
      this.adminId = [];
      val.admin_info &&
        val.admin_info.map((item) => {
          this.adminId.push(item.admin_id);
        });
      this.ruleformCloseroles.branchname = val.branch_id
        ? Number(val.branch_id.split("_")[1])
        : "";
      this.ruleformCloseroles.staff = this.adminId;
      this.moduleid = val.module_id;
    },
    handleCloseDialogCloseROL() {
      this.showOrgDialogCloseroles = false;
    },
    staffChangeFn(val) {
      this.newArr = this.adminId.filter((x) => !val.some((item) => x === item));
    },
    handleClickOkCloseROL() {
      const data = {
        admin_ids: this.newArr,
        branch_id: this.ruleformCloseroles.branchname,
        module_id: Number(this.moduleid.split("_")[1]),
      };
      PermissionCancleAuthorization(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "模块关系取消权限成功",
            type: "success",
          });
          this.showOrgDialogCloseroles = false;
          this.ModulebranchrelationListFn();
        }
      });
    },
    //删除操作
    deleteFn(val) {
      let brachid = [];
      let modleId = "";
      if (val.branch_info) {
        val.branch_info.forEach((item) => {
          brachid.push(Number(item.branch_id.split("_")[1]));
          modleId = Number(val.id.split("_")[1]);
        });
      } else {
        brachid = [Number(val.branch_id.split("_")[1])];
        modleId = Number(val.module_id.split("_")[1]);
      }
      const data = {
        module_id: modleId,
        branch_ids: brachid,
      };
      ModulebranchrelationDelete(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除模块关系成功",
            type: "success",
          });
          this.ModulebranchrelationListFn();
        }
      });
    },

    ModulebranchrelationListFn() {
      const data = {};
      ModulebranchrelationList(data).then((res) => {
        if (res.code === 10000) {
          const dataArray = [];
          res.data.forEach((item, index) => {
            item.id = item.module_info.module_id;
            item.module_name = item.module_info.module_name;
            item.branch_info.forEach((item2) => {
              item2.id = index + item2.branch_id;
              item2.module_id = item.module_info.module_id;
              item2.module_name = item.module_info.module_name;
            });
          });
          this.tableData = res.data;
          if (this.tableData.length > 6) {
            //一排操作栏
            this.maxheight = document.documentElement.clientHeight - 205;
          } else {
            this.maxheight = "auto";
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;
}
/deep/.el-select,
/deep/.el-cascader {
  width: 80% !important;
}
</style>